<template>
  <view class="course-page">
    <!-- 导航栏组件 -->
    <NavBar></NavBar>
    <view class="content" :style="getContentStyle()">
      <text class="page-title">{{ courseDetail.courseName }}</text>
      <text class="page-hint">{{ getTimeStr }}</text>
      <scroll-view class="content-list" scroll-y="true" :show-scrollbar="false">
        <view class="card">
          <view class="card-head">
            <text class="card-head-title">课程介绍</text>
          </view>
          <view class="card-line"></view>
          <rich-text class="content-txt" :nodes="courseDetail.courseIntroduction"></rich-text>
        </view>
        <view class="card">
          <view class="card-head">
            <text class="card-head-title">课程表</text>
            <view class="progress-bar">
              <view class="progress-fill" :class="{ 'progress-fill-green': progress === 100 }" :style="{ width: progress + '%' }"></view>
            </view>
            <text class="progress-txt">{{progress}}%</text>
          </view>
          <view class="card-line"></view>
          <view v-for="(item, index) in courseDetail.lessons" :key="index" class="list-item">
            <view class="item-dot">
              <view class="item-dot-circle" :class="{ 'item-dot-circle-active': item.lessonFinishCompletion === 1 }"></view>
              <view v-if="index !== courseDetail.lessons.length - 1" class="item-dot-line" :class="{ 'item-dot-line-active': item.lessonFinishCompletion === 1 }"></view>
            </view>
            <!-- <view class="item-state" :class="{ 'item-state-active': item.lessonFinishCompletion === 1 }">
              <text>{{ item.lessonFinishCompletion === 1 ? '已学' : '未学' }}</text>
            </view> -->
            <view class="item-content">
              <text class="item-content-title">{{ item.lessonName }}</text>
              <text class="item-content-hint" :class="getListHintClass(item)">{{ getListHint(item) }}</text>
            </view>
            <!-- <image v-if="item.lessonFinishCompletion === 1 && courseDetail.isFinished === 0 && courseDetail.deadlineState === 0" class="item-icon" src="/static/images/icon_success.png" mode="scaleToFill"></image> -->
            <view @click="handleGoInfo(item)" class="item-btn">{{ getListBtn(item) }}</view>
          </view>
        </view>
      </scroll-view>
      <view v-if="courseDetail.isFinished === 0 && courseDetail.deadlineState === 0" class="bottom-btn" @click="handleGoInfo()"><text>{{ courseDetail.lessons[0].lessonFinishCompletion ? '继续学习' : '进入学习' }}</text></view>
    </view>
  </view>
</template>

<script >
import { getCourse } from '@/api/course.js'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      courseId: null,
      progress: 0,
      courseDetail: {
        lessons: []
      },
    }
  },
  onLoad(options) {
    this.courseId = options.courseId
  },
  onShow() {
    this.getInfo()
  },
  computed: {
    getTimeStr() {
      if (this.courseDetail.deadline) {
        // 格式化时间
        return dayjs(this.courseDetail.deadline).format('YYYY-MM-DD HH:mm') + ' 截止学习'
      } else return '无期限'
    }
  },
  methods: {
    async getInfo() {
      this.courseDetail = await getCourse(this.courseId)
      this.progress = Math.round((this.courseDetail.finishLessonCount / this.courseDetail.lessonCount) * 100)
      this.courseDetail.lessons = this.courseDetail.lessons.map(item => {
        item.lessonFinishCompletion = Number(item.lessonFinishCompletion)
        return item
      })
      console.log('this.courseDetail.lesson', this.courseDetail.lessons)
    },
    handleGoInfo(item) {
      // 跳转到
      let lesson = item
      if (!item) {
        // 按顺序获取第一个未完成学习的课程信息
        lesson = this.courseDetail.lessons.find((item) => item.lessonFinishCompletion !== 1)
      }
      if (lesson) {
        try {
          uni.navigateTo({
            url: `/pages/course/info/index?courseId=${this.courseDetail.courseId}&lessonId=${lesson.lessonId}`
          })
        } catch(e) {
          console.log(e)
        }
      }
    },
    getContentStyle() {
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
      return {
        height: `calc(100% - ${(statusBarHeight + 44)}px)`
      }
    },
    getListHint(item) {
      if (item.lessonFinishCompletion === 1) {
        return '已完成'
      } else if (!item.lessonFinishCompletion) {
        return '未完成'
      } else {
		  return '部分完成'
	  }
    },
    getListHintClass(item) {
      if (item.lessonFinishCompletion === 1) {
        return 'item-content-hint-green'
      } else if (!item.lessonFinishCompletion) {
        return ''
      } else {
        return 'item-content-hint-blue'
      }
    },
    getListBtn(item) {
      if (!item.lessonFinishCompletion) {
        return '进入学习'
      } else if (Number(item.lessonFinishCompletion) === 1) {
        return '复习一下'
      } else {
        return '继续学习'
      }
    }
  }
}
</script>

<style lang="scss">
.course-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(207deg, #DCECFF 2%, #F6F7FB 61%);
}

.content {
  width: 100%;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  .page-title{
    font-size: 48rpx;
    font-weight: 600;
    line-height: 64rpx;
    color: #202844;
  }
  .page-hint{
    font-size: 24rpx;
    line-height: 40rpx;
    color: rgba(32, 40, 68, 0.65);
    margin-top: 16rpx;
  }
  .content-list{
    height: calc(100% - 80rpx);
    width: 100%;
    padding-top: 32rpx;
    padding-bottom: 144rpx;
    box-sizing: border-box;
  }
  .content-txt{
    color: #666666;
    font-size: 28rpx;
    line-height: 44rpx;
  }
}

.card{
  width: 100%;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 0 48rpx;
  padding-bottom: 32rpx;
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  .card-head{
    width: 100%;
    height: 110rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .card-head-title{
      color: #333333;
      font-size: 32rpx;
      line-height: 48rpx;
      font-weight: 600;
      line-height: 110rpx;
      flex: 1;
    }
  }
  .card-line{
    width: 100%;
    border-top: 1px solid #EBEDEF;
    margin-bottom: 32rpx;
  }
}

.bottom-btn{
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: 0;
  white: 100%;
  height: 96rpx;
  margin-bottom: 24rpx;
  border-radius: 24rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(270deg, #4677F4 0%, #7FA2FC 100%);
  text{
    font-size: 32rpx;
    font-weight: 600;
    line-height: 48rpx;
    color: #FFFFFF;
  }
}

.progress-bar {
  width: 168rpx;
  height: 8rpx;
  border-radius: 1600rpx;
  background: #F2F4F6;
  overflow: hidden;
  
  .progress-fill {
    height: 100%;
    background: #315BF4;
    border-radius: 1600rpx;
    transition: width 0.3s ease;
  }
  .progress-fill-green{
    background: #2AB55E;
  }
}
.progress-txt{
  font-size: 28rpx;
  line-height: 44rpx;
  text-align: right;
  color: #1F1F1F;
  margin-left: 16rpx;
  font-weight: normal;
}

.list-item{
  width: 100%;
  height: 124rpx;
  display: flex;
  flex-direction: row;
  .item-dot{
    margin-right: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .item-dot-circle{
      border-radius: 24rpx;
      border: 2rpx solid #B9BBBF;
      width: 16rpx;
      height: 16rpx;
      margin-top: 14rpx;
    }
    .item-dot-circle-active{
      border: 2rpx solid #315BF4;
    }
    .item-dot-line{
      background: #E2E5E8;
      height: 80rpx;
      width: 2rpx;
      margin-top: 14rpx;
    }
    .item-dot-line-active{
      background: #BDDEFF;
    }
  }
  .item-state{
    width: 44rpx;
    height: 92rpx;
    background: #B9BBBF;
    color: rgba(255, 255, 255, 0.95);
    line-height: 28rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16rpx;
    text{
      font-size: 24rpx;
      text-align: center;
    }
  }
  .item-state-active{
    background: linear-gradient(270deg, #4677F4 0%, #7FA2FC 100%);
  }
  .item-content{
    flex: 1;
    .item-content-title{
      width: 310rpx;
      color: #1F1F1F;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 44rpx;
      margin-bottom: 8rpx;
      display: block;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的文本 */
      text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
    }
    .item-content-hint{
      color: #666666;
      font-size: 24rpx;
      line-height: 40rpx;
	  padding: 4rpx 8rpx;
	  background: #F2F4F6;
	  border-radius: 8rpx;
	  display: inline-block;
	  align-self: flex-start;
    }
	.item-content-hint-green{
		background: #E9F7EE;
		color: #2AB55E;
	}
	.item-content-hint-blue{
		background: #E6F3FF;
		color: #155BD4;
	}
  }
  .item-icon{
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
    margin-top: 30rpx;
  }
  .item-btn{
    border-radius: 16rpx;
    width: 176rpx;
    height: 64rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #B9BBBF;
    color: #666666;
    font-size: 28rpx;
  }
}
</style>
